<template>
  <div>
    <van-nav-bar title="添加地址" left-text="" left-arrow @click-left="$router.push('/providehome')" />

    <!-- 信息栏 -->

    <van-form @submit="onSubmit">
      <!-- 输入任意文本 -->
      <van-cell-group>
        <van-field v-model="ruleForm.name" name="name" label="联系人" placeholder="用于取餐时对你的称呼" :rules="namerules" />
        <!-- 性别 -->
        <van-field name="sex" label="性别">
          <template #input>
            <van-radio-group v-model="ruleForm.sex" direction="horizontal">
              <van-radio name="男">先生</van-radio>
              <van-radio name="女">女士</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <!-- 输入手机号，调起手机号键盘 -->

        <van-field v-model="ruleForm.tel" type="tel" label="手机号码" placeholder="138138905" name="tel"
          :rules="telrules" />
        <!--  省市区选择器 -->
        <!-- <van-cell title="地址"  title-style="max-width:100px" @click="Addaddress">
          <div class="Addaddress">
            <span>请输入地址</span>
            <span>{{route.query.Houseaddress}}{{route.query.uaaddress}}</span>
            <van-icon name="arrow" />
          </div>
        </van-cell> -->
        <!-- 只读可点击的表格 -->
        <van-field readonly clickable name="address" v-model="ruleForm.address"  label="地址"
          placeholder="请选择地址" @click="Addaddress" />
        

          <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell>
        <van-popup v-model:show="show"><input type="text"></van-popup> -->


        <!-- 输入任意文本 -->
        <van-field v-model="ruleForm.addressDetail" name="addressDetail" label="门牌号" placeholder="例:5号楼203室"
          :rules="[{ required: true, message: '请填写详细信息' }]" />
        <!-- 标签 -->
        <van-cell title="标签" title-style="max-width:100px">
          <div class="Labelress">
            <van-button plain round v-for="(item, index) in addrList" :class="{ 'btn_active': flag === index }"
              @click="clickCpn(item, index)">{{ item }}</van-button>
            <!-- <van-button plain round :class="{ 'btn_active': flag === 2 }" @click="flag = 2" ref="home">家</van-button>
            <van-button plain round :class="{ 'btn_active': flag === 3 }" @click="flag = 3" ref="school">学校</van-button> -->
          </div>

        </van-cell>
        <!-- 设为默认地址 -->
        <div class="default-address">
          <!-- <van-field name="checkbox" label="复选框"> -->
          <!-- <van-checkbox v-model="checked" checked-color="#ee0a24">复选框</van-checkbox> -->
          <input type="checkbox" v-model="ruleForm.isDefault" name="isDefault" @click="isDefault = !isDefault"
             />选择默认地址
        </div>
      </van-cell-group>
      <div class="save-address">
        <van-button type="primary" block native-type="submit">保存</van-button>
      </div>
    </van-form>
    <!-- 保存地址 -->
  </div>




</template>

<script setup>
import { useAddress } from '@/hooks/useaddress'

const { addrList, clickCpn, ruleForm, namerules, telrules, onSubmit, Addaddress, flag } = useAddress()


</script>

<style lang="scss" scoped>
.van-radio-group {

  --van-radio-size: 16px;

}

.Addaddress {
  text-align: left;

  .van-icon {
    padding-left: 130px;
  }
}


.default-address {
  font-size: 12px;
  margin-top: 10px;

}

.Labelress {
  text-align: left;

  .van-button {
    width: 62px;
    height: 28px;
    color: #999;
    margin-right: 10px;
  }

  .btn_active {
    border: #88afd5 1px solid;
  }

}

.save-address {
  width: 375px;
  position: fixed;
  height: 60px;
  bottom: 0;
  background-color: #fff;

  .van-button {
    width: 345px;
    height: 40px;
    margin: 10px 15px;
    background-color: #88afd5;
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
  }

}
</style>